<template>
  <van-cell-group class="comment">
    <van-cell title="商品评价" is-link :value="`好评率:${replyChance}%`">
    </van-cell>
    <!-- 总体评价 -->
    <van-cell class="lists">
      <van-button size="small" @click="handleType('0')" :class="{active: commentData.isSum}">全部({{sumCount}})</van-button>
      <van-button size="small" @click="handleType('1')" :class="{active: commentData.isGood}">好评({{goodCount}})</van-button>
      <van-button size="small" @click="handleType('2')" :class="{active: commentData.isIn}">中评({{midCount}})</van-button>
      <van-button size="small" @click="handleType('3')" :class="{active: commentData.isPoor}">差评({{badCount}})</van-button>
    </van-cell>
    <!-- 2.评价列表-->
    <div v-if="commentData.hasComments">
      <comment-item v-for="item in commentData.commentList" :key="item.id" :reply="item">
      </comment-item>
    </div>
    <!-- 当没有评价时进行空状态的展示 -->
    <van-empty v-else description="暂时没有评论" />
  </van-cell-group>
</template>
<script setup>
import { Cell as VanCell, Button as VanButton,
  CellGroup as vanCellGroup, Empty as VanEmpty } from 'vant'
// 引入接口
import CommentItem from '@/components/commentItem.vue'
import { getCommentCounts, getCommentByType } from '@/api/product.js'
import { computed } from '@vue/reactivity';
import { ref } from 'vue';

//接受父组件的传值
const { productId, reply } = defineProps({
  productId: {
    type: [Number, String],
    required: true
  }
})

 
//存储评论相关的数据
const commentData = ref({
  // 存储所有的评价信息
  commentCounts: {},
  // 存储分类评价
  commentList:[],
  // 控制显示的评价状态
  active: '0',
  // 保存评价类型选中情况
  isSum: computed(() => commentData.value.active === '0'),
  isGood: computed(() => commentData.value.active === '1'),
  isIn: computed(() => commentData.value.active === '2'),
  isPoor: computed(() => commentData.value.active === '3'),
  // 判断是否存在评论
  hasComments: computed(() => commentData.value.commentList.length || 0)

})
// 请求商品评价
async function initReplyComments () {
  const { data } = await getCommentCounts(productId)
  // console.log(data)
  if (data.status !== 200) return
  commentData.value.commentCounts = data.data
}
const sumCount = computed(() =>commentData.value.commentCounts?.sum_count || 0)
const goodCount = computed(() =>commentData.value.commentCounts?.good_count || 0)
const midCount = computed(() =>commentData.value.commentCounts?.in_count || 0)
const badCount = computed(() =>commentData.value.commentCounts?.poor_count || 0)
const replyChance = computed(() =>commentData.value.commentCounts?.reply_chance || 0)
initReplyComments ()



// 根据分类获取评价
// type：请求的评价类别 0 - 全部 1 - 好评 2 - 中评 3 - 差评
async function initCommentByType (type) {
  const { data } = await getCommentByType( productId, {type})
  console.log(data)
  if (data.status !== 200) return
  commentData.value.commentList = data.data
}
initCommentByType ()


// 点击按钮事件 切换 选中的评价类型
function handleType(type) {
  commentData.value.active = type
  //发送新类型的评价请求
  initCommentByType (type)
}


</script>
<style lang='scss' scoped>
.lists{
  padding: 5px 15px;
  :deep(.van-button){
    border-radius: 10px;
    margin: 10px;
  }
  .active{
    background-color: #fdd985;

  }
}
</style>
